<script>
import tree from '@/mixins/tree/index.js'
import AjaxStore from '@/utils/store/proxyAjax'

export default {
  name: 'dataFenpei',
  inject:['user', 'Dialog'],
  mixins: [tree],
  data() {
    return {
      tree: {
        checkList: [],
        lazy: true,
        width: '400',
        height: '200',
        accordion: false,
        isShowHeader: false,
        treeMenuButtonList: [],
        treeOperateButtonList: [],
        search: {},
        showCheckbox: true,
        isCheckStrictly: true,
        selectTree: {},
        nextNodeKey: 'userId',
        nextNodeValue: '',
        idKey: 'deptId',
        title: '',
        getNextChildNode: this.getNextNode,
      },

      currentUser: '当前人员',
      currentUserName: '',
      dataFenpeiStr: '',
      spanLeft: 7,
      spanRight: 17,
      idKey: 'userId',
      getNextNodeUrl: '/v1/sys/user/getDataAuthByUserId',
      getNodeInfoUrl: '/v1/sys/user/findById',
      url: '/v1/sys/user/getDataAuthByUserId',
      store: new AjaxStore({
        url: '/v1/sys/user/getDataAuthByUserId'
      }),
    }
  },
  methods: {
    getCheckedList() {
      return this.$refs.tree.getChecked()
    },
    getInitInfo() {
      this.currentUserName = this.user.userName
      this.tree.nextNodeValue = this.user.userId
    },
    getTreeSelected(checkedNodeIds, checkedNodeList) {
      if (checkedNodeList.length === 0) {
        this.dataFenpeiStr = '0个'
      } else {
        this.dataFenpeiStr = checkedNodeList.map((item) => {
          return item.text
        }).join('、')
      }
    },
    reloadTree() {
      this.$refs.tree.emptyChecked()
      this.$refs.tree.load()
    }
  },
  watch: {
    'Dialog.visible':{
      immediate: true,
      handler(val) {
        val && this.getInitInfo()
      }
    }
  },
  render(h) {
    return (
      <div class="dataFenpei">
        <c-row class="data-top">
          <c-col span={ this.spanLeft }>
            <div class="data-left">
              <div>{ this.currentUser }: { this.currentUserName }</div>
            </div>
          </c-col>
          <c-col span={ this.spanRight }>
            <div class="data-right">
              <div class="title">拥有{ this.dataFenpeiStr }权限</div>
            </div>
          </c-col>
        </c-row>
        <tree
          class="data-bottom"
          ref="tree"
          tree={this.tree}
          on-tree-selected={this.getTreeSelected}
        ></tree>
      </div>
    )
  }
}
</script>

<style lang="scss">
  .dataFenpei{
    .data-top{
      .data-left{
        display: inline-block;
        font-size: 16px;
        font-weight: 400;
        color: #333;
        float: left;
        line-height: 22px;
      }
      .data-right{
        .title{
          line-height: 22px;
          font-size: 16px;
          font-weight: 400;
          color: #333;
        }
        display: inline-block;
      }
    }
    .data-bottom{
      margin: 5px 100px 0;
      height: 200px;
      .el-select-dropdown__list{
        padding-top: 0;
        .expand-tree{
          margin-top: 0;
        }
      }
    }
  }
</style>

